<style>
.color {
	position:relative;
	width:21px;
	height:18px;
	float:left;
	margin-left:8px;
	display:inline;
}
.color span {
	display:block;
	width:21px;
	height:18px;
	background:url("../Public/images/icons/color.gif") no-repeat left center;
}
.color_table {
	position:absolute;
	left:21px;
	top:18px;
	border:2px solid #ccc;
}
.color_table tr {
	width:800px;
}
.color_table td {
	cursor:pointer;
}
</style>
<div class="color"><span></span>
  <table id="select_color" width="100" class="color_table" style="display:none" border="0" cellpadding="0" cellspacing="0">
    <tr style="background:#FFFFFF; border:0">
      <td style="background:#000000;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
      <td style="background:#0000CC;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
      <td style="background:#00CC66;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
      <td style="background:#00FFCC;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
      <td style="background:#996699;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
    </tr>
    <tr style="background:#FFFFFF; border:0">
      <td style="background:#C0C0C0;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
      <td style="background:#808080;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
      <td style="background:#333333;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
      <td style="background:#FE0000;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
      <td style="background:#FF00FE;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
    </tr>
    <tr style="background:#FFFFFF; border:0">
      <td style="background:#FFCD00;border:1px solid #CCCCCC; padding:0px 3px;">&nbsp;</td>
      <td style="background:#993400;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
      <td style="background:#FFFFFF;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
      <td style="background:#99CD00;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
      <td style="background:#008002;border:1px solid #CCCCCC;padding:0px 3px;">&nbsp;</td>
    </tr>
    <tr style="background:#FFFFFF; border:0">
      <td style="background:#00CCFF;border:1px solid #CCCCCC; padding:0px 5px;">&nbsp;</td>
      <td style="background:#3366FF;border:1px solid #CCCCCC;padding:0px 5px;">&nbsp;</td>
      <td style="background:#0000FE;border:1px solid #CCCCCC;padding:0px 5px;">&nbsp;</td>
      <td style="background:#010080;border:1px solid #CCCCCC;padding:0px 5px;">&nbsp;</td>
      <td style="background:#CDFFFF;border:1px solid #CCCCCC;padding:0px 5px;">&nbsp;</td>
    </tr>
  </table>
</div>
<script>
$(document).ready(function(){
	$(".color").css("background-color",$("#title_color").val());
	$('.color span').click(function(){
		$('#select_color').show().find('td').hover(function(){
			$(this).css({'border-color':'#fff'});
		},function(){
			$(this).css({'border-color':'#ccc'});
		}).click(function(){
			$color=$(this).css('background-color');
			$('.color').css({'background':$color});
			$('#title').css({'color':$color});
			$('#title_color').val($color);
			$('#select_color').hide();
		});
	});	
});
</script>